<template>
<div>
  <!--编辑月票-->
  <basic-modal ref="monthlyTicketModal" customeClass="monthly-ticket-modal" width="700" static="true">
    <h3 slot="title">{{mouthTicketData.ticketModalName}}</h3>
    <div class="modal-body" slot="modal-body" style="padding:0px">
      <div class="btnGroup">
        <div @click="selectMonthTicketInfoTab('basicTab')" class="btnItem" :class="{activeText:mouthTicketData.tabName=='basicTab'}">
          <span class="step-icon" :class="{activeTab:mouthTicketData.tabName=='basicTab'}">1</span>
          <span class="step-text">基础信息</span>
        </div>
        <div @click="selectMonthTicketInfoTab('higherTab')" class="btnItem" :class="{activeText:mouthTicketData.tabName=='higherTab'}">
          <span class="step-icon" :class="{activeTab:mouthTicketData.tabName=='higherTab'}">2</span>
          <span class="step-text">高级配置</span>
        </div>
      </div>
      <el-form :model="mouthTicketData.baseTicketData" ref="ticketForm" label-position="left" :rules="rules" label-width="90px" style="padding: 30px 0; width: 520px">
        <!-- 基础信息 start -->
        <div v-show="mouthTicketData.tabName=='basicTab'" class="basicTab-box">
          <el-form-item label="通行权限" prop="parkJson">
            <div class="el-form--inline">
              <template v-if="selectedParkingLot.length">
                <el-tooltip placement="bottom-start">
                  <div slot="content">
                    <ul class="selectParkingLotTree">
                      <li v-for="item in selectedParkingLot" style="margin-bottom: 4px; font-size: 12px;">
                        {{ item.name }}
                        <ul v-for="it in item.children">
                          <li>{{it.name}}</li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                  <div class="selected-parkingLot">{{selectedParkingLotStr}}</div>
                </el-tooltip>
              </template>

              <div v-if="!selectedParkingLot.length" class="selected-parkingLot grayTip">未选择任何停车场</div>
              <el-button size="small" type="primary" @click="openSelectParkModal" class="select-park-btn ake_btn_text">设置</el-button>
            </div>
          </el-form-item>

          <el-form-item label="财务主体" prop="financialParkId" v-show="tableData.parkItems && tableData.parkItems.length>1">
            <template>
              <el-radio-group v-model="mouthTicketData.baseTicketData.financialParkId" class="finacSubj">
                <div class="finacSubj-item" v-for="(item,index) in tableData.parkItems">
                  <el-radio :label="item.parkId" :checked="mouthTicketData.baseTicketData.financialParkId==item.parkId">{{item.parkName}}</el-radio>
                  <!-- <div class="del-btn" @click="delectSelectParkItem(index,item.parkId)">
                    <img src="../../assets/img/ic_subscribe_delete.svg" alt />
                  </div> -->
                </div>
              </el-radio-group>
            </template>
          </el-form-item>

          <el-form-item label="月票名称" prop="ticketName">
            <el-input placeholder="请输入月票名称" v-model="mouthTicketData.baseTicketData.ticketName"></el-input>
          </el-form-item>

          <el-form-item label="月票单价" prop="price">
            <el-input placeholder="请输入月票单价" v-model="mouthTicketData.baseTicketData.price"></el-input>
            <span class="item-unit">元</span>
          </el-form-item>

          <el-form-item label="月票数量">
            <div class="el-form--inline">
              <el-select v-model="mouthTicketData.baseTicketData.maxSellLimit">
                <el-option label="有限" value="YES"></el-option>
                <el-option label="无限" value="NO"></el-option>
              </el-select>
              <el-form-item v-if="mouthTicketData.baseTicketData.maxSellLimit=='YES'" prop="maxSellNum" style="margin-left:10px;margin-right: 0px;">
                <el-input placeholder="请输入数量" v-model="mouthTicketData.baseTicketData.maxSellNum"></el-input>
              </el-form-item>
            </div>
          </el-form-item>

          <el-form-item label="有效期类型">
            <template>
              <el-radio class="radio" v-model="mouthTicketData.baseTicketData.renewMethod" label="NATURAL_MONTH">自然月</el-radio>
              <el-radio class="radio" v-model="mouthTicketData.baseTicketData.renewMethod" label="CUSTOM">自定义</el-radio>
            </template>
            <div class="tipsBox">
              <i class="el-icon-question"></i>
              <div class="tips bottom">
                <p>允许车主自定义选择续费时间，价格按照天数去计算。如月票单价300元，每天则为10元。</p>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input placeholder="请输入备注" type="textarea" :rows="3" v-model="mouthTicketData.baseTicketData.remark"></el-input>
          </el-form-item>
        </div>
        <!-- 基础信息 end -->

        <!-- 高级配置 start -->
        <div v-show="mouthTicketData.tabName=='higherTab'" class="higherTab-box">
          <el-form-item label="线上开通" prop="ticketType">
            <template>
              <el-radio class="radio" v-model="mouthTicketData.baseTicketData.ticketType" label="OUTTER" value="OUTTER">允许</el-radio>
              <el-radio class="radio" v-model="mouthTicketData.baseTicketData.ticketType" label="INNER" value="INNER">不允许</el-radio>
            </template>
          </el-form-item>

          <el-form-item label="月票凭证">
            <el-select v-model="mouthTicketData.baseTicketData.certifiRuleId" popper-class="trader-select">
              <el-option v-for="item in options4" :key="item.key" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="过期续费" prop="renew">
            <template>
              <el-radio class="radio" v-model="mouthTicketData.baseTicketData.renew" :label="1">允许</el-radio>
              <el-radio class="radio" v-model="mouthTicketData.baseTicketData.renew" :label="0">不允许</el-radio>
            </template>
          </el-form-item>

          <!-- 连续续费优惠 -->
          <el-form-item prop="continueBuyFlag" label="连续续费" v-show="mouthTicketData.baseTicketData.renew==1">
            <template>
              <el-radio v-model="mouthTicketData.baseTicketData.continueBuyFlag" :label="1">无优惠</el-radio>
              <el-radio v-model="mouthTicketData.baseTicketData.continueBuyFlag" :label="2">折扣优惠</el-radio>
              <el-radio v-model="mouthTicketData.baseTicketData.continueBuyFlag" :label="3">金额优惠</el-radio>
            </template>
          </el-form-item>
          <!-- 连续续费优惠-折扣优惠-start -->
          <el-form ref="discountForm" style="width:auto;" class="renewDiscount-form" :model="discountOption" label-width="80px" size="small" v-show="mouthTicketData.baseTicketData.renew==1 && mouthTicketData.baseTicketData.continueBuyFlag==2">
            <!-- 分段1-start -->
            <div class="item-chunk" v-show="discountIndexArr[0]">
              <el-form-item label="连续续费" style="margin-bottom: 0">
                <div class="item-row">
                  <div class="item-row hasUnit">
                    <el-input v-model="discountOption.month1" placeholder="请输入月数"></el-input>
                    <span class="unit">月</span>
                  </div>
                  <div class="item-row hasUnit" style="margin-left: 12px">
                    <el-input v-model="discountOption.discount1" placeholder="请输入折数"></el-input>
                    <span class="unit">折</span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label style="margin-bottom: 0">
                <span class="money-tip">
                  为&nbsp;
                  <span>{{discountMoney1}}元</span>
                </span>
              </el-form-item>
              <el-form-item prop="phoneStr1" label="手机端显示" style="margin-bottom: 0">
                <el-input v-model="discountOption.phoneStr1"></el-input>
              </el-form-item>
              <img src="../../assets/img/close windows.svg" class="del-icon" alt @click="closeDiscountChunk(0)" />
            </div>
            <!-- 分段1-end -->
            <!-- 分段2-start -->
            <div class="item-chunk" v-show="discountIndexArr[1]">
              <el-form-item label="连续续费" style="margin-bottom: 0">
                <div class="item-row">
                  <div class="item-row hasUnit">
                    <el-input v-model="discountOption.month2" placeholder="请输入月数"></el-input>
                    <span class="unit">月</span>
                  </div>
                  <div class="item-row hasUnit" style="margin-left: 12px">
                    <el-input v-model="discountOption.discount2" placeholder="请输入折数"></el-input>
                    <span class="unit">折</span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label style="margin-bottom: 0">
                <span class="money-tip">
                  为&nbsp;
                  <span>{{discountMoney2}}元</span>
                </span>
              </el-form-item>
              <el-form-item prop="phoneStr1" label="手机端显示">
                <el-input v-model="discountOption.phoneStr2"></el-input>
              </el-form-item>
              <img src="../../assets/img/close windows.svg" class="del-icon" alt @click="closeDiscountChunk(1)" />
            </div>
            <!-- 分段2-end -->
            <!-- 分段3-start -->
            <div class="item-chunk" v-show="discountIndexArr[2]">
              <el-form-item label="连续续费" style="margin-bottom: 0">
                <div class="item-row">
                  <div class="item-row hasUnit">
                    <el-input v-model="discountOption.month3" placeholder="请输入月数"></el-input>
                    <span class="unit">月</span>
                  </div>
                  <div class="item-row hasUnit" style="margin-left: 12px">
                    <el-input v-model="discountOption.discount3" placeholder="请输入折数"></el-input>
                    <span class="unit">折</span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label style="margin-bottom: 0">
                <span class="money-tip">
                  为&nbsp;
                  <span>{{discountMoney3}}元</span>
                </span>
              </el-form-item>
              <el-form-item prop="phoneStr1" label="手机端显示">
                <el-input v-model="discountOption.phoneStr3"></el-input>
              </el-form-item>
              <img src="../../assets/img/close windows.svg" class="del-icon" alt @click="closeDiscountChunk(2)" />
            </div>
            <!-- 分段3-end -->
            <!-- 分段4-start -->
            <div class="item-chunk" v-show="discountIndexArr[3]">
              <el-form-item label="连续续费" style="margin-bottom: 0">
                <div class="item-row">
                  <div class="item-row hasUnit">
                    <el-input v-model="discountOption.month4" placeholder="请输入月数"></el-input>
                    <span class="unit">月</span>
                  </div>
                  <div class="item-row hasUnit" style="margin-left: 12px;">
                    <el-input v-model="discountOption.discount4" placeholder="请输入折数"></el-input>
                    <span class="unit">折</span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label style="margin-bottom: 0">
                <span class="money-tip">
                  为&nbsp;
                  <span>{{discountMoney4}}元</span>
                </span>
              </el-form-item>
              <el-form-item prop="phoneStr1" label="手机端显示">
                <el-input v-model="discountOption.phoneStr4"></el-input>
              </el-form-item>
              <img src="../../assets/img/close windows.svg" class="del-icon" alt @click="closeDiscountChunk(3)" />
            </div>
            <!-- 分段4-end -->
            <img src="../../assets/img/ic_subscribe_add copy.svg" alt class="add-btn" @click="addDiscountChunk" v-show="discountIndexArr.length<4" style="margin-bottom: 10px" />
          </el-form>
          <!-- 连续续费优惠-折扣优惠-end -->
          <!-- 连续续费优惠-金额优惠-start -->
          <el-form ref="moneyForm" style="width:auto;" class="renewDiscount-form" :model="moneyOption" v-show="mouthTicketData.baseTicketData.renew==1 && mouthTicketData.baseTicketData.continueBuyFlag==3" label-width="80px">
            <!-- 分段1-start -->
            <div class="item-chunk" v-show="moneyIndexArr[0]">
              <el-form-item label="连续续费" style="margin-bottom: 10px">
                <div class="item-row">
                  <div class="item-row hasUnit">
                    <el-input v-model="moneyOption.month1" placeholder="请输入月数"></el-input>
                    <span class="unit">月</span>
                  </div>
                  <div class="item-row hasUnit" style="margin-left: 12px;">
                    <el-input v-model="moneyOption.money1" placeholder="请输入折数"></el-input>
                    <span class="unit">元</span>
                  </div>
                </div>
              </el-form-item>

              <el-form-item prop="phoneStr1" label="手机端显示" style="margin-bottom: 0px">
                <el-input v-model="moneyOption.phoneStr1"></el-input>
              </el-form-item>
              <img src="../../assets/img/close windows.svg" class="del-icon" alt @click="closeMoneyChunk(0)" />
            </div>
            <!-- 分段1-end -->
            <!-- 分段2-start -->
            <div class="item-chunk" v-show="moneyIndexArr[1]">
              <el-form-item label="连续续费" style="margin-bottom: 10px">
                <div class="item-row">
                  <div class="item-row hasUnit">
                    <el-input v-model="moneyOption.month2" placeholder="请输入月数"></el-input>
                    <span class="unit">月</span>
                  </div>
                  <div class="item-row hasUnit" style="margin-left: 12px;">
                    <el-input v-model="moneyOption.money2" placeholder="请输入折数"></el-input>
                    <span class="unit">元</span>
                  </div>
                </div>
              </el-form-item>

              <el-form-item prop="phoneStr2" label="手机端显示" style="margin-bottom: 0px">
                <el-input v-model="moneyOption.phoneStr2"></el-input>
              </el-form-item>
              <img src="../../assets/img/close windows.svg" alt class="del-icon" @click="closeMoneyChunk(1)" />
            </div>
            <!-- 分段2-end -->
            <!-- 分段3-start -->
            <div class="item-chunk" v-show="moneyIndexArr[2]">
              <el-form-item label="连续续费" style="margin-bottom: 10px">
                <div class="item-row">
                  <div class="item-row hasUnit">
                    <el-input v-model="moneyOption.month3" placeholder="请输入月数"></el-input>
                    <span class="unit">月</span>
                  </div>
                  <div class="item-row hasUnit" style="margin-left: 12px;">
                    <el-input v-model="moneyOption.money3" placeholder="请输入折数"></el-input>
                    <span class="unit">元</span>
                  </div>
                </div>
              </el-form-item>

              <el-form-item prop="phoneStr3" label="手机端显示" style="margin-bottom: 0px">
                <el-input v-model="moneyOption.phoneStr3"></el-input>
              </el-form-item>
              <img src="../../assets/img/close windows.svg" alt class="del-icon" @click="closeMoneyChunk(2)" />
            </div>
            <!-- 分段3-end -->
            <!-- 分段4-start -->
            <div class="item-chunk" v-show="moneyIndexArr[3]">
              <el-form-item label="连续续费" style="margin-bottom: 10px">
                <div class="item-row">
                  <div class="item-row hasUnit">
                    <el-input v-model="moneyOption.month4" placeholder="请输入月数"></el-input>
                    <span class="unit">月</span>
                  </div>
                  <div class="item-row hasUnit" style="margin-left: 12px;">
                    <el-input v-model="moneyOption.money4" placeholder="请输入折数"></el-input>
                    <span class="unit">元</span>
                  </div>
                </div>
              </el-form-item>

              <el-form-item prop="phoneStr4" label="手机端显示" style="margin-bottom: 0px">
                <el-input v-model="moneyOption.phoneStr4"></el-input>
              </el-form-item>
              <img src="../../assets/img/close windows.svg" class="del-icon" alt @click="closeMoneyChunk(3)" />
            </div>
            <!-- 分段4-end -->
            <img src="../../assets/img/ic_subscribe_add copy.svg" alt class="add-btn" @click="addMoneyChunk" v-show="moneyIndexArr.length<4" style="margin-bottom: 10px" />
          </el-form>
          <!-- 连续续费优惠-金额优惠-end -->

          <el-form-item prop="renewFormerDays" label="向前续费" v-show="mouthTicketData.baseTicketData.renew==1">
            <el-input placeholder="请输入天数（允许月票向前续费*天）" v-model.number="mouthTicketData.baseTicketData.renewFormerDays"></el-input>
            <span class="item-unit">天</span>
            <div class="tipsBox" style="right:-25px;">
              <i class="el-icon-question"></i>
              <div class="tips right">
                <p>允许车主购买该月票时，向前续费相应的天数。</p>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="无牌车" prop="supportVirtualCarcode">
            <template>
              <el-radio :label="1" v-model="mouthTicketData.baseTicketData.supportVirtualCarcode">支持</el-radio>
              <el-radio :label="0" v-model="mouthTicketData.baseTicketData.supportVirtualCarcode">不支持</el-radio>
            </template>
          </el-form-item>

          <el-form-item prop="inviteCarTotal" label="访客授权">
            <div class="inline-row first-item">
              <span style="margin-right: 10px">允许授权</span>
              <el-input placeholder="请输入数量" v-model="mouthTicketData.baseTicketData.inviteCarTotal"></el-input>
              <span style="margin-left: 10px">个访客车牌(每车位)</span>
            </div>
            <div class="tipsBox" style="right:-25px;">
              <i class="el-icon-question"></i>
              <div class="tips right">
                <p>允许车主添加相应数量的邀请车牌，一同使用该月票的收费规则。</p>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="多车多位">
            <div class="inline-row">
              <el-checkbox v-model="vipTypeData.isDynamicMode" v-bind:true-label="1" v-bind:false-label="0"></el-checkbox>
              <div class="tipsBox" style="left:10px;">
                <i class="el-icon-question"></i>
                <div class="tips">
                  <p>可开通≥2个车位的月票</p>
                </div>
              </div>
            </div>

            <el-form-item label label-width="0" v-show="vipTypeData.isDynamicMode">
              <el-checkbox v-model="vipTypeData.autoSwitchVip" :true-label="1" :false-label="0">支持场内切换</el-checkbox>
            </el-form-item>

            <el-form-item label label-width="0" v-show="vipTypeData.isDynamicMode" style="margin-bottom:0px;">
              <el-checkbox v-model="vipTypeData.dynamicFullLimit" v-bind:true-label="1" v-bind:false-label="0" class="sp-checkbox">内场多位多车满位到剩余，同一VIP票车辆外场已在场车辆无法进入内场</el-checkbox>
              <div class="tipsBox" style="right:-24px;top:-5px;">
                <i class="el-icon-question"></i>
                <div class="tips right">
                  <p>外场A区域，内场B区域，一组车辆在B区域是多位多车，B区域车位从满到余时，同组车A区域在场车辆不能进入B区域。防止车主将长时间停放于A区域的车辆开入B区域而逃避停车费</p>
                </div>
              </div>
            </el-form-item>
          </el-form-item>

          <el-form-item label="满位控制">
            <el-checkbox v-model="vipTypeData.openVipFullLimit" v-bind:true-label="1" v-bind:false-label="0"></el-checkbox>
            <el-form-item label="最多可进" label-width="90px" v-show="vipTypeData.openVipFullLimit">
              <el-input v-model.munber="vipTypeData.vipFullLimitValue" placeholder="请输入车辆数量"></el-input>
              <span class="item-unit">辆</span>
            </el-form-item>
            <el-form-item label="满位放行模式" label-width="90px" style="margin-bottom:0px;" v-show="vipTypeData.openVipFullLimit">
              <el-select v-model="vipTypeData.vipFullOpenModel" placeholder="请选择活动区域">
                <el-option label="系统有空位自动放行，无空位手动放行按VIP计费" :value="0"></el-option>
                <el-option label="系统有空位自动放行，无空位手动放行按临时车计费" :value="1"></el-option>
                <el-option label="系统无空位自动放行，按临时车计费" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>

          <el-form-item label="按日期">
            <div class="inline-row">
              <el-checkbox v-model="vipTypeData.isDatePrivilege" v-bind:true-label="1" v-bind:false-label="0"></el-checkbox>
              <el-form-item v-show="vipTypeData.isDatePrivilege" label-width="10px">
                <a href="javascript:;" @click="openCalendar()" class="ake_btn ake_btn_text">设置日期表</a>
              </el-form-item>
              <div class="tipsBox" v-show="vipTypeData.isDatePrivilege" style="left:120px">
                <i class="el-icon-question"></i>
                <div class="tips">
                  <p>月票生效的日期</p>
                </div>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="按时段">
            <div class="inline-row">
              <el-checkbox v-model="vipTypeData.isTimePrivilege" v-bind:true-label="1" v-bind:false-label="0"></el-checkbox>
              <el-form-item label label-width="10px" v-if="vipTypeData.isTimePrivilege">
                <el-time-picker v-model="vipTypeData.priTimeArrFrom" format="HH:mm" :editable="false" start-placeholder="开始时间"></el-time-picker>
              </el-form-item>
              <el-form-item label label-width="10px" v-if="vipTypeData.isTimePrivilege">
                <el-time-picker v-model="vipTypeData.priTimeArrTo" format="HH:mm" :editable="false" end-placeholder="结束时间"></el-time-picker>
              </el-form-item>
              <div class="tipsBox" style="right:-25px" v-if="vipTypeData.isTimePrivilege">
                <i class="el-icon-question"></i>
                <div class="tips right">
                  <p>月票生效的时段</p>
                </div>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="是否计费">
            <template>
              <el-radio :label="1" v-model="vipTypeData.isChargeGroupRelated">支持</el-radio>
              <el-radio :label="0" v-model="vipTypeData.isChargeGroupRelated">不支持</el-radio>
            </template>
          </el-form-item>

          <div class="other-item-box">
            <div v-if="vipTypeData.isChargeGroupRelated==1">
              <el-form-item prop="chargeGroupCode" v-if="chargeGroupRender">
                <template>
                  <el-table :data="tableData.parkItems" border class="select-park-table" style="width:100%">
                    <el-table-column prop="parkName" label="停车场名称"></el-table-column>
                    <el-table-column prop="optionArr" label="计费组">
                      <template slot-scope="scope">
                        <el-select v-model="tableData.parkItems[scope.$index].chargeGroupCode" placeholder="请选择计费组" v-if="tableData.parkItems[scope.$index].parkSysType===1">
                          <el-option v-for="item in tableData.parkItems[scope.$index].optionArr" :label="item.typeName" :value="item.chargeTypeSeq"></el-option>
                        </el-select>
                        <el-input v-else-if="tableData.parkItems[scope.$index].parkSysType===0" v-model="tableData.parkItems[scope.$index].chargeGroupCode" placeholder="请填写计费组编号"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-form-item>
            </div>
          </div>

          <el-form-item label="离线月票" prop="offLine">
            <template>
              <el-radio :label="1" v-model="mouthTicketData.baseTicketData.offLine">支持</el-radio>
              <el-radio :label="0" v-model="mouthTicketData.baseTicketData.offLine">不支持</el-radio>
            </template>
            <div class="tipsBox">
              <i class="el-icon-question"></i>
              <div class="tips bottom">
                <p>设备离线时，支持离线月票的车辆仍可正常放行</p>
              </div>
            </div>
          </el-form-item>
        </div>
        <!-- 高级配置 end -->
      </el-form>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text ake_btn_confirm" @click="selectMonthTicketInfoTab('higherTab')" v-if="mouthTicketData.tabName=='basicTab'">
        下一步
        <i class="el-icon-arrow-right el-icon--right"></i>
      </button>
      <button class="ake_btn ake_btn_text" @click="closed('monthlyTicketModal')" v-if="mouthTicketData.tabName=='basicTab'">取消</button>
      <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="submitForm('ticketForm')" v-if="mouthTicketData.tabName=='higherTab'">确认</button>
      <button class="ake_btn ake_btn_text" @click="selectMonthTicketInfoTab('basicTab')" v-if="mouthTicketData.tabName=='higherTab'">
        <i class="el-icon-arrow-left"></i>上一步
      </button>
    </div>
  </basic-modal>

  <!-- 日期控件 -->
  <basic-modal ref="multiCalendarModal" customeClass="multi-calendar-modal" static="true" width="100%">
    <a slot="modal-icon-close" class="close" @click="closed('multiCalendarModal')">&times;</a>
    <h3 slot="title">选择日期</h3>
    <div class="modal-body manageBody" slot="modal-body">
      <!-- selectedDate: 当前已经选中的日期数组 -->
      <!-- min: 当前可选的最小日期 -->
      <!-- max: 当前可选的最大日期 -->
      <!-- save 点击保存时会调用的方法，回传参数为当前选择的日期数组 -->
      <calendar v-if="modalStatus===3" :disabledStatus="true" :isCanEdit="false" :selectedDate="monthTicketCheckObj.superiorData.priDateArrStr"></calendar>
      <calendar v-else-if="modalStatus===1 || modalStatus===2" :selectedDate="vipTypeData.priDateArrStr" @save="saveCalendar"></calendar>
    </div>
    <div class="modal-footer" slot="modal-footer"></div>
  </basic-modal>

  <!-- 月票类型-查看 -->
  <basic-modal ref="monthTicketTypeCheck" width="640" customeClass="month-ticket-type-check" static="true" :needModalFooter="false">
    <h3 slot="title">{{monthTicketCheckObj.basicData.ticketName}}</h3>
    <div class="modal-body" slot="modal-body" style="padding:0px 0px 20px 0px;">
      <div class="btnGroup">
        <div @click="selectMonthTicketCheckInfoTab('basicTab')" class="btnItem" :class="{activeText:monthTicketCheckObj.tabName=='basicTab'}">
          <span class="step-icon" :class="{activeTab:monthTicketCheckObj.tabName=='basicTab'}">1</span>
          <span class="step-text">基础信息</span>
        </div>
        <div @click="selectMonthTicketCheckInfoTab('higherTab')" class="btnItem" :class="{activeText:monthTicketCheckObj.tabName=='higherTab'}">
          <span class="step-icon" :class="{activeTab:monthTicketCheckObj.tabName=='higherTab'}">2</span>
          <span class="step-text">高级配置</span>
        </div>
      </div>
      <div class="basicInfo" v-show="monthTicketCheckObj.tabName=='basicTab'">
        <table>
          <tr v-if="monthTicketCheckObj.basicData.channelArr && monthTicketCheckObj.basicData.channelArr.length" class="td-span">
            <td :rowspan="monthTicketCheckObj.basicData.channelArr.length">通行权限：</td>
            <td>
              <span>{{monthTicketCheckObj.basicData.channelArr[0].parkName}}</span>
              <span>{{monthTicketCheckObj.basicData.channelArr[0].channelName}}</span>
            </td>
          </tr>
          <tr v-else>
            <td>通行权限：</td>
            <td></td>
          </tr>
          <tr v-for="(item,index) in monthTicketCheckObj.basicData.channelArr" v-if="index>0" class="td-span">
            <td>
              <span>{{item.parkName}}</span>
              <span>{{item.channelName}}</span>
            </td>
          </tr>
          <tr>
            <td width="130">财务主体：</td>
            <td>{{monthTicketCheckObj.basicData.financialSubject}}</td>
          </tr>
          <tr>
            <td>月票类型名称：</td>
            <td>{{monthTicketCheckObj.basicData.monthTicketTypeName}}</td>
          </tr>
          <tr>
            <td>月票单价：</td>
            <td>{{monthTicketCheckObj.basicData.price}}元</td>
          </tr>
          <tr>
            <td>月票数量：</td>
            <td>{{monthTicketCheckObj.basicData.num}}</td>
          </tr>
          <tr>
            <td>有效期类型：</td>
            <td>{{monthTicketCheckObj.basicData.effectiveType}}</td>
          </tr>
          <tr>
            <td>备注：</td>
            <td>{{monthTicketCheckObj.basicData.remark}}</td>
          </tr>
        </table>
      </div>
      <div class="heightInfo" v-show="monthTicketCheckObj.tabName=='higherTab'">
        <table>
          <tr>
            <td width="130">线上开通：</td>
            <td>{{monthTicketCheckObj.superiorData.onlineOpen}}</td>
          </tr>
          <tr>
            <td>月票凭证：</td>
            <td>{{monthTicketCheckObj.superiorData.monthTicketProof}}</td>
          </tr>
          <tr>
            <td>过期续费：</td>
            <td>{{monthTicketCheckObj.superiorData.overduePaid}}</td>
          </tr>
          <tr v-if="monthTicketCheckObj.superiorData.overduePaid=='允许'">
            <td class="td-top">连续续费：</td>
            <td v-if="monthTicketCheckObj.superiorData.overduePaidType=='折扣优惠'" class="more-p">
              <p>{{monthTicketCheckObj.superiorData.overduePaidType}}</p>
              <p v-for="(item,index) in monthTicketCheckObj.superiorData.overduePaidArr">
                <span>{{index+1}}.</span>
                <span>连续续费：{{item.month}}个月，</span>
                <span>打{{item.discount}}折，</span>
                <span>为{{item.totalPrice}}元，</span>
                <span>手机端显示：</span>
                <span>{{item.phoneStr}}</span>
              </p>
            </td>
            <td v-else-if="monthTicketCheckObj.superiorData.overduePaidType=='金额优惠'" class="more-p">
              <p>{{monthTicketCheckObj.superiorData.overduePaidType}}</p>
              <p v-for="(item,index) in monthTicketCheckObj.superiorData.overduePaidArr">
                <span>{{index+1}}.</span>
                <span>连续续费：{{item.month}}个月，</span>
                <span>共{{item.totalPrice}}元，</span>
                <span>手机端显示：</span>
                <span>{{item.phoneStr}}</span>
              </p>
            </td>
            <td v-else>{{monthTicketCheckObj.superiorData.overduePaidType}}</td>
          </tr>
          <tr v-if="monthTicketCheckObj.superiorData.overduePaid=='允许'">
            <td>向前续费:</td>
            <td v-if="monthTicketCheckObj.superiorData.renewFormerDays">{{monthTicketCheckObj.superiorData.renewFormerDays}}天</td>
            <td v-else>0天</td>
          </tr>
          <tr>
            <td>无牌车：</td>
            <td>{{monthTicketCheckObj.superiorData.virtualCarCode}}</td>
          </tr>
          <tr>
            <td>访客授权：</td>
            <td v-if="monthTicketCheckObj.superiorData.visitorEmpower">允许授权{{monthTicketCheckObj.superiorData.visitorEmpower}}个访客车牌</td>
            <td v-else></td>
          </tr>
          <tr>
            <td class="td-top">多车多位：</td>
            <td class="more-p">
              <p>{{monthTicketCheckObj.superiorData.moreCarMoreSeat}}</p>
              <p v-if="monthTicketCheckObj.superiorData.autoSwitchVip=='支持'">支持场内切换</p>
              <p v-if="monthTicketCheckObj.superiorData.dynamicFullLimit=='支持'">场内多位多车满位到剩余，同一VIP票车辆外场已在场车辆无法进入内场</p>
            </td>
          </tr>
          <tr>
            <td class="td-top">满位控制：</td>
            <td class="more-p">
              <p>{{monthTicketCheckObj.superiorData.openVipFullLimit}}</p>
              <p v-if="monthTicketCheckObj.superiorData.openVipFullLimit=='支持' && monthTicketCheckObj.superiorData.vipFullLimitValue">最多可进{{monthTicketCheckObj.superiorData.vipFullLimitValue}}辆</p>
              <p v-if="monthTicketCheckObj.superiorData.openVipFullLimit=='支持'">{{monthTicketCheckObj.superiorData.vipFullOpenModel | vipFullOpenModel}}</p>
            </td>
          </tr>
          <tr>
            <td>按日期：</td>
            <td v-if="monthTicketCheckObj.superiorData.isDatePrivilege=='支持'">
              <a href="javascript:;" @click="openCalendar()" class="a_link">查看详情</a>
            </td>
            <td v-else>不支持</td>
          </tr>
          <tr>
            <td>按时段：</td>
            <td v-if="monthTicketCheckObj.superiorData.isTimePrivilege=='支持'">{{monthTicketCheckObj.superiorData.timeSlot}}</td>
            <td v-else>不支持</td>
          </tr>
          <tr>
            <td class="td-top">是否计费：</td>
            <td v-if="monthTicketCheckObj.superiorData.iScharging=='是'" class="more-p">
              <p>是</p>
              <p v-for="(item,index) in tableData.parkItems">
                <span>{{index+1}}.{{item.parkName}}：</span>
                <template v-if="item.parkSysType===0">
                  <span>{{item.chargeGroupCode}}</span>
                </template>
                <template v-else>
                  <span v-for="it in item.optionArr" v-if="it.chargeTypeSeq==item.chargeGroupCode">{{it.typeName}}</span>
                </template>
              </p>
            </td>
            <td v-else>否</td>
          </tr>
          <tr>
            <td>离线月票：</td>
            <td>{{monthTicketCheckObj.superiorData.offLine}}</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="modal-footer" slot="modal-footer"></div>
  </basic-modal>

  <!--选择停车场树-->
  <basic-modal ref="selectParkModal" width="400" customeClass="select-park-modal" static="true">
    <h3 slot="title">选择通行权限</h3>
    <div class="modal-body" slot="modal-body">
      <div v-show="isShowTree" class="common-tree modal-tree-box">
        <!-- <el-input v-on:keyup.native.13="search_ztree('ParkTree')" placeholder="请输入搜索内容" prefix-icon="el-icon-search" v-model="treeSearchName">
          </el-input>-->
        <ul id="ParkTree" name="ParkTree" class="ztree"></ul>
      </div>
      <p v-show="!isShowTree" class="noTreeTips">暂无数据；</p>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button v-if="isShowTree" type="button" class="ake_btn ake_btn_text ake_btn_confirm" @click="selectParkSure()">确认</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('selectParkModal')">取消</button>
    </div>
  </basic-modal>
</div>
</template>

<script>
import common from "@mixins/common.js";
import ztreeSearch from "@mixins/ztreeSearch.js";
// 日期组件
import Calendar from "@components/calendar/Calendar";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import "../../assets/js/libs/jquery.ztree.core.min.js";
import "../../assets/js/libs/jquery.ztree.excheck.min.js";

import componentJS from "./js/component.js";

export default {
  name: "monthTicketTypeComponent",
  mixins: [common, invokeModal, componentJS, ztreeSearch],
  components: {
    Calendar
  },
  data() {
    return {};
  }
};
</script>

<style lang="css" scoped>
@import "../../assets/less/libs/zTreeStyle.css";
</style>

<style lang="less" scoped>
@import "../../assets/less/manage.less";

.item-chunk {
  background: #f4f4f4;
  padding: 18px 20px;
  padding-right: 50px;
  border-radius: 4px;
  position: relative;
  margin-bottom: 10px;

  .del-icon {
    position: absolute;
    right: 4px;
    top: 4px;
  }
}

.item-row.hasUnit {
  position: relative;

  .unit {
    position: absolute;
    right: 8px !important;
    top: 0;
  }
}

.el-form.renewDiscount-form {
  margin-right: 0;
  margin-left: 96px;
  padding-left: 12px;
  border-left: 1px dashed #c2c2c2;
  margin-bottom: 10px;
}
</style>

